const util = require("@/utils/util");
const { shared } = wx.worklet;
function upbtnDisplayChange(
  upbtnDisplay: Ref<boolean>,
  e: WechatMiniprogram.ScrollViewScroll
) {
  if (e.detail.scrollTop > 0) {
    upbtnDisplay.value = true;
  } else {
    upbtnDisplay.value = false;
  }
  console.log("scrollUpdate", e.detail.scrollTop, upbtnDisplay.value);
}
const debounceUpbtnDisplayChange = util.debounce(upbtnDisplayChange, 500);

Component({
  behaviors: [require("@/behaviors/com-base-behavior")],
  options: {
    virtualHost: true,
    pureDataPattern: /^_/,
    dynamicSlots: true,
  },
  properties: {
    scrollHeight: {
      type: String,
      value: "100vh",
    },
    pageConfig: {
      type: Object,
      value: {
        page: 1,
        pageSize: 10,
        listFun: (page: number, pageSize: number) => Promise.resolve([]),
      },
    },
  },
  data: {
    list: [],
    _page: 1, // 当前页码
    _pageSize: 10, // 每页条数
    upbtnDisplay: { value: false },
    scrollTop: 0,
  },
  methods: {
    _loadData() {
      let res: Promise<[]> = this.properties.pageConfig.listFun(
        this.data._page,
        this.data._pageSize
      );
      res
        .then((v) => {
          if (v.length == 0) {
            return;
          }
          this.data._page = this.data._page + 1;
          this.setData({
            list: [...this.data.list, ...v],
          });
        })
        .catch((v) => {
          console.log("grid-list loadData err", v);
        });
    },
    scrolltolower() {
      this._loadData();
    },
    scrollFun(e: any) {
      debounceUpbtnDisplayChange(this.data.upbtnDisplay, e);
    },
    upbtnTap() {
      this.setData({ scrollTop: 0 });
    },
  },
  lifetimes: {
    created() {
      this.data._page = this.properties.pageConfig.page;
      this.data._pageSize = this.properties.pageConfig.pageSize;
      const display = shared(false);
      this.data.upbtnDisplay = display;
    },
    ready() {
      this._loadData();
      this.applyAnimatedStyle(".up-btn", () => {
        "worklet";
        console.log("up-btn display", this.data.upbtnDisplay.value);
        return {
          display: this.data.upbtnDisplay.value ? "block" : "none",
        };
      });
    },
  },
});

export {};
